<template>
  <el-container>
    <el-header style="background-color: white;color: #000000;">
        <h1 align="center">题库管理</h1>
      </el-header>
    <el-main>
        <!--  行内表单-->
        <el-form :model="queryParam" :inline="true" class="demo-form-inline" label-width="100px">
             <el-form-item label="题目">
                   <el-input v-model="queryParam.quContent"></el-input>
             </el-form-item>
             <el-form-item label="题型">
                  <el-select v-model="queryParam.quType">
                       <el-option value="" label="--请选择题型--"></el-option>
                       <el-option value="单选题" label="单选题"></el-option>
                       <el-option value="多选题" label="多选题"></el-option>
                       <el-option value="判断题" label="判断题"></el-option>
                  </el-select>
             </el-form-item>
             <el-form-item >
                   <el-button type="success" size="mini" @click="queryByPage()">查询</el-button>
                   <el-button type="success" size="mini" @click="add()">新增</el-button>
             </el-form-item>
        </el-form>

        <!-- 表格组件-->
      <el-table :data="list" style="width: 100%;">
            <!-- 列标签-->
          <el-table-column prop="quId" label="编号" width="100"></el-table-column>
          <el-table-column prop="quContent" label="题目" width="400"></el-table-column>
          <el-table-column prop="quType" label="题型" width="100"></el-table-column>
          <el-table-column prop="quScore" label="分数" width="100"></el-table-column>
          <el-table-column prop="quAnswer" label="答案" width="100"></el-table-column>
          <el-table-column prop="createTime" label="修改时间" width="200"></el-table-column>
          <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="update(scope.row)">编辑</el-button>
              </template>
          </el-table-column>
      </el-table>
      <div class="block">
        <!-- 1 size-change 下拉框选中事件触发的函数 -->
        <!-- 2 current-change 页码和上一页，下一页触发的事件-->
        <!-- 3 current-page 当前页的页码-->
         <!-- 4 page-sizes  下拉框选中行数的集合 -->
         <!--5 page-size 每页显示条数->
         <!-- 6 layout 分页页面布局 -->
         <!--7 total 总条数 -->
          <el-pagination
              @size-change="sc"
              @current-change="cc"
              :current-page="queryParam.page"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="queryParam.row"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
      </div>

      <!-- 对话框-->
      <el-dialog :title="title" :visible.sync="isShow" width="50%">
          <!-- 表单组件-->
          <el-form :model="formData" label-width="100px">

              <el-form-item label="题目">
                    <el-input v-model="formData.quContent"></el-input>
              </el-form-item>
              <el-form-item label="题型">
                   <el-select v-model="formData.quType">
                        <el-option value="单选题" label="单选题"></el-option>
                        <el-option value="多选题" label="多选题"></el-option>
                        <el-option value="判断题" label="判断题"></el-option>
                   </el-select>
              </el-form-item>

           <template v-if="formData.quType!='判断题'">
              <el-form-item label="A选项">
                    <el-input v-model="formData.quAoption"></el-input>
              </el-form-item>
              <el-form-item label="B选项">
                    <el-input v-model="formData.quBoption"></el-input>
              </el-form-item>
              <el-form-item label="C选项">
                    <el-input v-model="formData.quCoption"></el-input>
              </el-form-item>
              <el-form-item label="D选项">
                    <el-input v-model="formData.quDoption"></el-input>
              </el-form-item>
             </template>

              <el-form-item label="分数">
                    <el-input-number v-model="formData.quScore" :min="1" :max="10"></el-input-number>
              </el-form-item>
              <el-form-item label="答案">
                  <template v-if="formData.quType=='多选题'">
                    <input type="checkbox" value="A" v-model="qs">A
                    <input type="checkbox" value="B" v-model="qs">B
                    <input type="checkbox" value="C" v-model="qs">C
                    <input type="checkbox" value="D" v-model="qs">D
                  </template>
                  <template v-else-if="formData.quType=='单选题'">
                      <input type="radio" value="A" v-model="formData.quAnswer">A
                      <input type="radio" value="B" v-model="formData.quAnswer">B
                      <input type="radio" value="C" v-model="formData.quAnswer">C
                      <input type="radio" value="D" v-model="formData.quAnswer">D
                  </template>
                  <template v-else>
                    <input type="radio" value="√" v-model="formData.quAnswer">√
                    <input type="radio" value="×" v-model="formData.quAnswer">×
                  </template>


              </el-form-item>
              <el-form-item >
                    <el-button type="success" size="mini" @click="save">保存</el-button>
              </el-form-item>

          </el-form>
      </el-dialog>

    </el-main>
  </el-container>
</template>

<script>
 export default {
        name:"question",
        data(){
           return{
                title:"修改",//对话框标题
                isShow:false,//对话框是否显示
                list:[],//当前页集合
                total:0,//总条数
                totalPage:"",//总页数
                queryParam:{//查询参数
                      page:1,
                      row:5,
                      quContent:"",
                      quType:""
                },
                qs:[],//答案数组
                formData:{//表单数据
                    quId:null,
                    quContent:"",
                    quAoption:"",
                    quBoption:"",
                    quCoption:"",
                    quDoption:"",
                    quType:"",
                    quScore:"",
                    quAnswer:""
                }
           }
        },
        methods:{
            queryByPage(){  //查询分页
                var self = this;
                this.$http.get("/paper-question/queryQuetionByPage",
                            { params:
                                   this.queryParam,
                            }).then(function(rs){
                                if(rs.data.success){
                                   //赋值当前页
                                   self.list = rs.data.data.list;
                                   //赋值总条数
                                   self.total = rs.data.data.total;
                                   //赋值总页数
                                   self.totalPage = rs.data.data.totalPage;
                                }

                            }).catch(function(rs){
                                  console.log(rs);
                                  self.$message("服务器连接错误");
                            })

            },
            sc(row){//下拉框触发
               this.queryParam.row = row;
               //刷新
               this.queryByPage();
            },
            cc(page){//页码触发的事件
              this.queryParam.page = page;
               //刷新
               this.queryByPage();
            },
            update(row){//修改
                 //显示对话框
                 this.isShow = true;
                 //更改标题
                 this.title ="修改";
                 //数据回显
                 this.formData = row;
                 //判断数据类型,做多选题答案的数据回显
                 if(row.quType=="多选题"){
                   //清空qs
                   this.qs=[];
                    for(var i=0;i<row.quAnswer.length;i++){
                        this.qs.push(row.quAnswer[i]);
                    }
                 }
                 console.log(row);
            },
            add(){//打开新增窗口
                this.isShow = true;
                //更改标题
                this.title ="新增";
                //清空表单
                this.formData={};
                this.qs=[];
            },
            save(){//保存
              var url ="";
              if(this.title=="新增"){
                  url="/paper-question/add";
              }else{
                 url ="";
              }
              //如果是多选题
              if(this.formData.quType=="多选题"){
                 //清空
                 this.formData.quAnswer="";
                 //取出qs的值，赋值给quAnswer
                 for(var i=0;i<this.qs.length;i++){
                     this.formData.quAnswer+=this.qs[i];
                 }
              }
              console.log(this.formData)
              var self = this;
              this.$http.get(url,
                          { params:
                                 this.formData,
                          }).then(function(rs){
                              self.$message(rs.data.info);
                              if(rs.data.success){
                                  //关闭对话框
                                  self.isShow = false;
                                  //刷新
                                  self.queryByPage();
                              }

                          }).catch(function(rs){
                                console.log(rs);
                                self.$message("服务器连接错误");
                          })


            }
        },
        mounted(){
           this.queryByPage();
        }
 }
</script>

<style>
</style>
